<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/include/taglibs.jsp"%>
<%@ include file="/common/include/javascript.jsp"%>
<html>
  <head>
    <title>人员添加</title>
    <style type="text/css">
	   	label.error {
			color: red;
			font-style: italic
		}
		input.error { 
			border: 1px dotted red; 
		}
		input:focus { 
			border: 1px dotted black; 
		}
    </style>
  </head>
  <script type="text/javascript">
  
  $().ready(function() {
	 /* 
		  $("#commentForm").validate();
			var validator = $("#signupForm").validate({
				debug:false, //调试模式取消submit的默认提交功能
				errorClass: "error",//默认为错误的样式类为：error
				validClass: "check",//验证成功后的样式，默认字符串valid
				focusInvalid: true,//表单提交时,焦点会指向第一个没有通过验证的域
				focusCleanup:true;//焦点指向错误域时，隐藏错误信息，不可与focusInvalid一起使用！
				onkeyup: true,
				errorElement: "div",
				submitHandler: function(form){ //表单提交句柄,为一回调函数，带一个参数：form
					form.submit(); //提交表单
				}
			});
		*/	

  $("#signupForm").validate({
			rules: {
				"person.name": {
					required: true,
					minlength:2,
					remote:{
						url: "validateNameAjax.do",     //后台处理程序 
						type: "post",               //数据发送方式
						dataType: "json",           //接受数据格式    
						data: {                     //要传递的数据
								username: function() {
								return $("#username").val();
							  	}
						      }
					}
				},
				"person.password": {
					required: true,
					minlength: 5
				},
				confirm_password: {
					required: true,
					minlength: 5,
					equalTo: "#password"
				},
				"person.super_class":{
					required: true
				},
				"person.sub_class":{
					required: true
				}
				
			},		
			messages: {
				"person.password": {
					required: "请输入密码",
					minlength: "Your password must be at least 5 characters long"
				},
				confirm_password: {
					required: "请输入密码",
					minlength: "Your password must be at least 5 characters long",
					equalTo: "两次密码必须相同"
				}
			}
		});
		
	});
	
function getsort(){  
    var superId=$("#selectSuperClass").val(); 
    $.ajax({  
        cache:false,  
        url:'findSubClassAjax2.do',  
        type:'post',  
        dataType:'json',  
        data:{superId:superId},  
        success:update_c  
    });
}  
function update_c(json){  
    var sort=json;  
   
  	$("#selectSubClass option").each(function(index,domEle){
		if(index != 0){
			$(this).remove();	
		}
  	 });
    for(var i in sort){  
        $option = $("<option></option>");
        $option.attr("value",sort[i].id);
        $option.text(sort[i].name);
        $("#selectSubClass").append($option);
    }  
}  	
</script>	
  <body>
  	<font color="red"><s:fielderror /></font>
 	<!--<font color="red"><s:fielderror name="person.name" /></font>-->
  	<br>
   	<s:form action="insert" namespace="/person" id="signupForm" theme="simple">
   		<!-- 
   	  	  用户名
   	  	  <s:textfield id="username" name="person.name" cssClass="{required:true,minlength:2}"/>
		  密码
		  <s:password id="password" name="person.password"  cssClass="{required:true,minlength:5,messages:{required:'请输入密码'}}"/>
		  确认密码
		  <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password',messages:{required:'请再次输入密码'}}" />
   		<input type="submit" value="提交"/>
	  -->	
	  <s:hidden name="saveParams"/>
	  <table>
		  	<tr>
		  		<td>用户名</td>
		  		<td><s:textfield id="username" name="person.name"/></td>
		  	</tr>
		  	<tr>
		  		<td>密码</td>
		  		<td><s:password id="password" name="person.password"/></td>
		  	</tr>
			<tr>
				<td>确认密码</td>
				<td><input id="confirm_password" name="confirm_password" type="password" /></td>
			</tr>
			<tr>
				<td>年龄</td>
				<td><s:textfield id="age" name="person.age"/></td>
			</tr>
			<!-- 
			<tr>
			  	<td>地区</td>
			  	<td>
				  	<s:select id="selectSuperClass" cssStyle="width:75px;"  name="person.super_class" list="@com.howard.modules.person.enums.ProvinceEnum@values()"
				  			headerKey=""  headerValue="请选择..."  listKey="key" listValue="value" onchange="getsort()"  />
					<s:select id="selectSubClass" cssStyle="width:70px;" name="person.sub_class"  list="cityList"  
							headerKey=""  headerValue="请选择..."  listKey="id" listValue="name"/>
				</td>
			</tr>
			<tr>
				<td>城市</td>
				<td>
					<table>
						<tr>
							<td>
								可选择<br/>
								<s:select cssStyle="width:100px; height:160px; " id="nomembersid" name="nomembers" list="@com.howard.modules.person.enums.ProvinceEnum@values()" listKey="key" listValue="value" multiple="true" size="10"/>
							</td>
							<td>
			  						<button style="width:40px" type="button" onclick="moveNodes('nomembersid','membersid');" >&nbsp;&gt;&gt;&nbsp;</button>
									<br/><br/><br/>
									<button style="width:40px" type="button" onclick="moveNodes('membersid','nomembersid');"  >&nbsp;&lt;&lt;&nbsp;</button>
							</td>
							<td>
								已选择<br/>
								<s:select cssStyle="width:100px; height:160px; " id="membersid" name="members" list="cityList" listKey="id" listValue="name" multiple="true" size="10"/>
							</td>
						</tr>
					</table>
				</td>	
			</tr>		
			 -->
		 </table>		
		 <s:token/>
		 <input type="submit" value="提交"/>
   	</s:form>
  </body>
</html>
